<script lang="ts" setup>
import { ref, onMounted } from "vue";
import router from "@/router";
import applyForm from "./components/applyForm.vue";
import PageWrapper from "@/components/Wrapper";
import detailTable from "./components/detailTable.vue";
import operation from "./components/operation.vue";
import {
  getWarehouseAllocationDetailForUpdate,
  setWarehouseAllocationConfirmInbound
} from "@/api/warehouseAllocation";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { useMessage } from "@/hooks/useMessage";
import { add } from "@/utils/caculate";

const { createNotification } = useMessage();
const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();

defineOptions({
  name: "inventoryTransferConfirmDetail"
});
const tableData = ref([]);
const detailTableRef = ref();
const tableHeight = ref(0);
const pageWrapperRef = ref();
const applyFormRef = ref(null);
const outboundNum = ref(0);
const inboundNum = ref(0);
const diffNum = ref(0);

const handleCurrentChange = (obj: any) => {
  initData(obj);
};

onMounted(() => {
  const { id } = router.currentRoute.value.query;
  initData(id);
  pageWrapperRef.value.initData();
});

// 获取数据
const initData = (id: any) => {
  getWarehouseAllocationDetailForUpdate({ id: Number(id) }).then(rsp => {
    applyFormRef.value.setForm(rsp.data);
    tableData.value = rsp.data.itemList;
    outboundNum.value = rsp.data.outboundNum;
    inboundNum.value = rsp.data.inboundNum;
    diffNum.value = rsp.data.diffNum;
  });
};

const submitApply = () => {
  setWarehouseAllocationConfirmInbound(
    Object.assign(applyFormRef.value.getForm(), {
      itemList: [...detailTableRef.value.getTableData()]
    })
  ).then(rsp => {
    if (rsp.code === 0) {
      createNotification({
        title: "温馨提示",
        message: rsp.msg,
        type: "success"
      });
      goBack();
    }
  });
};

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

// 获取总数
const setTableData = (data: any) => {
  let a = 0,
    b = 0,
    c = 0;
  data.forEach((item: any) => {
    item.itemList?.forEach((val: any) => {
      a = add(add(a, val.outboundNum), val.num);
      b = add(b, val.inboundNum);
      c = add(c, val.diffNum);
    });
  });
  outboundNum.value = a;
  inboundNum.value = b;
  diffNum.value = c;
};
</script>
<template>
  <div class="main_box">
    <PageWrapper
      ref="pageWrapperRef"
      v-model:height="tableHeight"
      :isShowBottom="false"
      :isShowLine="false"
    >
      <template #header>
        <applyForm ref="applyFormRef" @handle-search="handleCurrentChange" />
      </template>
      <template #content>
        <div class="table_box">
          <operation />
          <detailTable
            ref="detailTableRef"
            :list="tableData"
            :tableHeight="tableHeight"
            @set-table-data="setTableData"
          />
        </div>
      </template>
      <template #footer>
        <section
          class="flex flex-row justify-between pb-[16px] pt-[16px] pr-[24px] pl-[24px] bg-white rounded-t-[8px]"
        >
          <div class="flex flex-row">
            <div class="flex flex-row items-center mr-[80px]">
              <span>出库物料总数：</span>
              <p class="text-[20px] font-bold">{{ outboundNum }}</p>
            </div>
            <div class="flex flex-row items-center mr-[80px]">
              <span>入库物料总数：</span>
              <p class="text-[20px] font-bold">{{ inboundNum }}</p>
            </div>
            <div class="flex flex-row items-center">
              <span>差额处理总数：</span>
              <p class="text-[20px] font-bold">{{ diffNum }}</p>
            </div>
          </div>
          <div>
            <el-button type="primary" @click="submitApply"
              ><span class="text-[16px]">提交</span></el-button
            >
            <el-button @click="goBack"
              ><span class="text-[16px]">取消</span></el-button
            >
          </div>
        </section>
      </template>
    </PageWrapper>
  </div>
</template>
<style lang="scss" scoped></style>
